
<html>
<head>
<title>主页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
	<script type="application/x-javascript">
	/* 页面加载的时候添加一个定时器，0秒之后执行hideURLbar函数。hideURLbar函数将页面滚动至坐标（0,1）
	 因为chrome等浏览器会有滚动缓存功能，比如你在A页面滚动后跳转到B页面，点击返回键回到A页面，会发现滚动条位置仍然保持 */
	addEventListener("load", function() { 
			setTimeout(hideURLbar, 0); 
		}, false); 
		
		function hideURLbar(){ 
			window.scrollTo(0,1); 
		}


</script>
<!-- Custom Theme files -->
<link href="../css/app/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/app/style.css" type="text/css" rel="stylesheet" media="all">  
<!-- //Custom Theme files --> 
<!-- js -->
<script src="../js/jquery-2.2.3.min.js"></script>  
<script src="../js/bootstrap.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>

	<!-- //js -->

</head>
<style>
	.button-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.button-item {
		flex: 0 0 calc(20% - 10px); /* 每行显示5个按钮，设置为20%宽度 */
		margin-right: 10px; /* 控制按钮之间的间距 */
		margin-bottom: 10px; /* 控制行与行之间的间距 */
		text-align: center; /* 居中按钮内文本 */
	}

	button {
		width: 100%; /* 按钮宽度填充父容器 */
		padding: 12px; /* 适当减少内边距，使按钮更为紧凑 */
		font-size: 14px; /* 调整字体大小 */
		border: none; /* 去除边框 */
		cursor: pointer; /* 鼠标指针样式 */
		min-width: 120px; /* 最小宽度，确保即使文本较长也能显示完整 */
		white-space: nowrap; /* 不换行显示 */
		overflow: hidden; /* 超出部分隐藏 */
		text-overflow: ellipsis; /* 超出部分显示省略号 */
	}

	.green-button {
		background-color: #25a625;
		color: white;
	}

	.red-button {
		background-color: #ff6b6b;
		color: white;
	}
</style>
<body> 
	<!-- banner -->
	<div class="banner" style="height: 900px;">
		<!-- header -->
		<div class="header">
			<!-- navigation -->
			<div class="navigation agiletop-nav">
				<div class="container">
					<nav class="navbar navbar-default">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header w3l_logo">
							<h1><a href="../html/index.html"></a></h1>
						</div>
						<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
							<ul class="nav navbar-nav navbar-right">
								<li><a href="index.html" class="active">主页</a></li>
								<!-- Mega Menu -->
								<li>
									<a href="menu.html" class="dropdown-toggle" >菜单 </a>
								</li>
								<li class="w3pages">
									<a href="orderList.html" class="dropdown-toggle">我的订单</a>
								</li>

									<li class="head-dpdn">
										<a href="login.html">登录</a>
									</li>
									<li class="head-dpdn">
										<a href="register.html">免费注册</a>
									</li>
									<li class="head-dpdn">
										<a href="http://60.205.91.68:8080/admin/admin/pages/member/chat/userchat.html" target="_blank">客服</a>
									</li>
									<li class="head-dpdn">
										<a href="../html/login.html">退出</a>
									</li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
			<!-- //navigation --> 
		</div>
		<!-- //header-end --> 
		<!-- banner-text -->
	<div id="app">
		<div class="banner-text">

			<div class="container" style="padding-left: 280px; margin-top: -100px;">
				<div class="agileits_search">
					<form id="tableForm" action="../dinnerTableStatus" method="post" @submit.prevent="">

						<input type="hidden" name="methods" value="submitTable">

						<div id="searchResult" style="margin-top: 20px;">

							<div class="button-grid">
								<div v-for="(item, index) in tableNames" :key="item.id" class="button-item">
									<button
											@click="handleButtonClick(item)"
											:class="{'green-button': item.table_status === 0, 'red-button': item.table_status === 1}">
										{{item.table_name}}
									</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="module" >

	new Vue({
		el:'#app',
		data:{
			tableNames:[],//餐桌数据
			userid:0,
		},
		methods: {
			openCustomer(){
				window.open("http://60.205.91.68:8080/admin/admin/pages/member/chat/userchat.html")
			},
			// 获取餐桌数据方法
			fetchTableNames() {
				let previousTableNames = []; // 保存上一次的tableNames数据
				const poll = () => {
					axios.post('../dinnerTableStatus')
							.then(response => {
								const newTableNames = response.data; // 获取新的tableNames数据
								for(let i=0;i<previousTableNames.length;i++){
									if(newTableNames[i].table_status!==previousTableNames[i].table_status){
										alert("餐厅状态变化");
										break;
									}
								}
								this.tableNames = response.data;
								previousTableNames=this.tableNames;
								// 继续下一次长轮询
								setTimeout(poll, 3000); // 设置轮询间隔为5秒钟
							})
							.catch(error => {
								console.error('Error fetching table names:', error);
								// 出错时继续下一次长轮询
								setTimeout(poll, 3000); // 出错时同样设置间隔
							});
				};
				// 初次调用长轮询
				poll();
			},

			handleButtonClick(item) {

				if (item.table_status === 0) {
					if (this.userid === 0) {
						if (confirm("检测到您未登录，点击确认登录或选择游客方式点单")) {
							window.location.href = 'login.html';
						} else {
							sessionStorage.setItem('dinnerTableId', item.id);//发送数据到另外一个页面
							this.occupancy(item.id);
							window.location.href = 'menu.html';

						}
					}else {
						alert("您已登陆,正在进入点单页面");
						sessionStorage.setItem('dinnerTableId', item.id);//发送数据到另外一个页面
						window.location.href = 'menu.html';
						this.occupancy(item.id);
					}
				} else if (item.table_status === 1) {
					alert("此桌已经被占用，请更换座位");
				}
			},
			occupancy(id){
				const params=new URLSearchParams();
				params.append("tableid",id)
				axios.post("../fooddetail?op=occupancy",params).then(resp=>{
					const jm=resp.data;
					if (jm.code===1){
						console.log("占用成功");
					}else {
						console.log("占用失败");
					}
				})
			},
			getUserid() {
				const userIdStr = sessionStorage.getItem("userid");
				if (userIdStr !== null) {
					this.userid = parseInt(userIdStr);
				} else {
					// 处理用户未登录时的逻辑，例如跳转到登录页面或者设置默认值
					this.userid = 0; // 设置默认值为0或者其他合适的未登录状态值
				}
			}

		},
		mounted() {
			this.fetchTableNames(); // 页面加载时获取一次数据
			this.getUserid();
		}
	});
</script>
</html>